<template>
    <div>
        <el-table :data="tableData" row-key="id">
            <el-table-column prop="title" label="权限名称" />
            <el-table-column label="图标">
                <template #default="scope">
                    <div style="display: flex; align-items: center;">
                        <el-icon size="20px">
                            <component :is="mapIcons[scope.row.icon]"></component>
                        </el-icon>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button round type="primary" @click="handleUpdate(scope.row)">更新</el-button>
                    <el-popconfirm title="您确定要删除么?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button round type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="更新权限">
            <el-form ref="updateFormRef" :model="updateForm" :rules="updateRules" class="demo-ruleForm" status-icon>
                <el-form-item label="权限名称" prop="title">
                    <el-input v-model="updateForm.title" />
                </el-form-item>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm()">
                        更新
                    </el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { ref, onMounted, reactive } from 'vue';
import {
    HomeFilled,
    Key,
    OfficeBuilding,
    UploadFilled,
    List,
    User
} from '@element-plus/icons-vue'
const mapIcons = {
    HomeFilled,
    Key,
    OfficeBuilding,
    UploadFilled,
    List,
    User
}
const tableData = ref([])

onMounted(() => {
    getList()
})

const getList = async () => {
    var res = await axios.get("/adminapi/rights/list")
    // console.log(res.data)
    tableData.value = res.data
}

// 更新对话框
const dialogVisible = ref(false)

const updateFormRef = ref();

const currentItem = ref({});

const handleUpdate = (item) => {
    dialogVisible.value = true;
    currentItem.value = item;
    updateForm.title = item.title
}

const updateForm = reactive({
    title: ""
})

const updateRules = reactive({
    title: [
        { required: true, message: '请输入权限名称', trigger: 'blur' },
    ]
})

const handleConfirm = () => {
    updateFormRef.value.validate(async (valid, fields) => {

        if (valid) {
            var res = await axios.put(`/adminapi/rights/${currentItem.value.id}`, updateForm)
            dialogVisible.value = false;
            if (res.data.code === 0) {
                ElMessage({
                    message: '执行成功',
                    type: 'success',
                })
                await getList();
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            console.log('error submit!', fields)
        }
    })


}

const handleDelete = async ({ id }) => {
    var res = await axios.delete(`/adminapi/rights/${id}`)
    if (res.data.code === 0) {
        ElMessage({
            message: '执行成功',
            type: 'success',
        })
        await getList();
    } else {
        ElMessage.error(res.data.msg)
    }
}

</script>